import * as React from 'react';

import { PhoneNumberField, Alert } from '@aws-amplify/ui-react';
import { PhoneNumberFieldDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import {
  AccessibilityExample,
  AutoCompleteExample,
  DialCodeSelectExample,
  ClassNameExample,
  DefaultPhoneNumberFieldExample,
  DescriptiveTextExample,
  RefsExample,
  RequiredFieldExample,
  RequiredFieldStyledExample,
  SizeExample,
  StatesExample,
  StylePropsExample,
  PhoneNumberFieldThemeExample,
  ValidationErrorExample,
  VariationExample,
} from './examples';

## Demo

<PhoneNumberFieldDemo />

## Usage

Import the `PhoneNumberField` component and provide a `label` for accessibility/usability as well as a `defaultDialCode`
which will auto-populate the dial code select field.

<Example>
  <DefaultPhoneNumberFieldExample />
  <ExampleCode>
```jsx file=./examples/DefaultPhoneNumberFieldExample.tsx

````
  </ExampleCode>
</Example>

### Dial Code Select Properties

<Alert variation="info"  role="none">All `countryCode` fields are being deprecated in favor of the new `dialCode` fields.  If you still have instances of `defaultCountryCode`,
`countryCodeList`, `countryCodeName`, `countryCodeLabel`, and `onCountryCodeChange` then please update these to the new `dialCode` props listed below.</Alert>

The dial code selector can be customized by setting several properties when using the `PhoneNumberField` primitive. The custom
properties specific to the dial code selector are the following:

- `defaultDialCode` (_required_): The default dial code that will be selected upon render
- `dialCodeList`: An array of dial codes (strings) used as options in the dial code selector
- `dialCodeName`: A name used when handling form submission for the dial code selector
- `dialCodeLabel`: A hidden accessible label for the dial code selector
- `onDialCodeChange`: A custom change handler for the dial code selector

* If both `defaultDialCode`, `dialCodeList`, `dialCodeName`, `dialCodeLabel`, and `onDialCodeChange` and the corresponding `countryCode` prop are provided, then the value in the `dialCode` prop will be preferred.

<Example>
  <DialCodeSelectExample />
  <ExampleCode>
```jsx file=./examples/DialCodeSelectExample.tsx

````

  </ExampleCode>
</Example>

### Autocomplete - supporting password managers

Use the `autoComplete` prop to tell the browser how to populate the `PhoneNumberField`. By default, the `PhoneNumberField` primitive uses `tel-national`
as the `autoComplete` property for the text field and `tel-country-code` as the `autoComplete` property for the dial code selector.

If the `PhoneNumberField` primitive is intended to be used in a form that is compatible with most password managers, the `autoComplete` property should
be set to `username` (see [Password Form Styles that Chromium Understands](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands/)).

<Example>
  <AutoCompleteExample />
  <ExampleCode>
```jsx file=./examples/AutoCompleteExample.tsx

````

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

<Example>
  <AccessibilityExample />
  <ExampleCode>
```jsx file=./examples/AccessibilityExample.tsx

````

  </ExampleCode>
</Example>

### Sizes

`PhoneNumberField` sizes are designed to match the styling of other form field components such as Buttons. There are three sizes: `'small'`, (default), and `'large'`.

<Example>
  <SizeExample />
  <ExampleCode>
```jsx file=./examples/SizeExample.tsx

````

</ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <VariationExample />
  <ExampleCode>
```jsx file=./examples/VariationExample.tsx

````

  </ExampleCode>
</Example>

### Descriptive text

To provide additional descriptive text of the field's requirements, use the `descriptiveText` prop. To customize the descriptive text, you may pass a `Text` component as the prop's value.

<Example>
  <DescriptiveTextExample />
  <ExampleCode>
```jsx file=./examples/DescriptiveTextExample.tsx

````

  </ExampleCode>
</Example>

### States

The available `PhoneNumberField` states include `isDisabled` and `isReadOnly`. A disabled field will be not be focusable, mutable,
or submitted with form data. A readonly field cannot be edited by the user.

<Example>
  <StatesExample />
  <ExampleCode>
```jsx file=./examples/StatesExample.tsx

````

  </ExampleCode>
</Example>

### Required field

Use the `isRequired` prop to specify a required field. If a user attempts to submit a field that is both required and empty, they will be prompted to fill out the field.

<Example>
  <RequiredFieldExample />
  <ExampleCode>
```jsx file=./examples/RequiredFieldExample.tsx

````

  </ExampleCode>
</Example>

There is no default styling for required form fields. Customize the `label` or `descriptiveText` to instruct the user of the required field.

<Example>
  <RequiredFieldStyledExample />
  <ExampleCode>
```jsx file=./examples/RequiredFieldStyledExample.tsx

````

  </ExampleCode>
</Example>

### Validation error

Use the `hasError` and `errorMessage` fields to mark a `PhoneNumberField` as having a validation error.

<Example>
  <ValidationErrorExample />
  <ExampleCode>
```jsx file=./examples/ValidationErrorExample.tsx

````

  </ExampleCode>
</Example>

### Forward refs

<Fragment>{() => import('./../shared/forwardRefAlert.mdx')}</Fragment>

The standard `ref` prop will forward to the underlying `input` element, and the `dialCodeRef` prop forwards to the dial code `select` element.

The following is a contrived example demonstrating use of the `ref` and `dialCodeRef` props:

<Example>
  <RefsExample />
  <ExampleCode>
```jsx file=./examples/RefsExample.tsx

````

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="PhoneNumberField" link="input" element="<input>">
  <Example>
    <PhoneNumberField label="Phone Number" name="phone"/>

    <ExampleCode>

    ```jsx
    <PhoneNumberField label="Phone Number" name="phone"/>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="PhoneNumberField">
  <Example>
    <PhoneNumberFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/PhoneNumberFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="PhoneNumberField" />

### Global styling

To override styling on all `PhoneNumberField` primitives, you can set the Amplify CSS variables with the built-in `.amplify-phonenumberfield`
and `.amplify-dialcodeselect` class.

<Example>
  <PhoneNumberField
    defaultDialCode="+1"
    label="Globally styled field"
    className="globally-styled-textfield"
  />
  
  <ExampleCode>
```css
/* styles.css */
.amplify-phonenumberfield,
.amplify-dialcodeselect {
  --amplify-components-fieldcontrol-border-color: rebeccapurple;
}
```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific `PhoneNumberField`, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <ClassNameExample />
  <ExampleCode>
```css
/* styles.css */
.custom-phonenumberfield-class .amplify-phonenumberfield,
.custom-phonenumberfield-class .amplify-dialcodeselect {
  border-radius: 0;
}
```

  </ExampleCode>
</Example>

_Using style props:_

All style props will be applied to the [`Flex`](flex) wrapper of the `PhoneNumberField`. To style the `input` of the `PhoneNumberField`, you can pass a `inputStyles` prop with the style props you want to apply to the input.

<Example>
  <StylePropsExample />
  <ExampleCode>
```jsx file=./examples/StylePropsExample.tsx

```

  </ExampleCode>
</Example>